<template>
  <div class="eventAnalysis">
    <!-- 顶部区域 具有 抽样参数 近似计算参数 -->
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>事件分析</span>
        <span class="tool_main">
          <span class="save" @click="dialog_save=true">
            <i class="el-icon-folder-add"></i>
            保存
          </span>
          <i class="fgf"></i>
          <el-tooltip class="tool_son" effect="light" content="刷新" placement="bottom">
            <i class="el-icon-refresh"></i>
          </el-tooltip>
          <el-tooltip class="tool_son" effect="light" content="下载数据" placement="bottom">
            <i class="el-icon-download"></i>
          </el-tooltip>
        </span>
      </header>
    </div>
    <!-- config 区域 -->
    <config @query="queryTotalChange" ref="indexConfig" :config="config"></config>
    <!-- 图表绘制区域 -->
    <echartSelf @conversion="updateTime" :queryDataArr="queryDataArr" :queryTotal="queryTotal"></echartSelf>
    <!-- 表格显示区域 -->
    <tableSelf :queryTotal="queryTotal" :queryDataArr="queryDataArr"></tableSelf>
    <!-- 保存弹框 -->
    <el-dialog
      top="8vh"
      :modal-append-to-body="false"
      class="diglog_box"
      :visible.sync="dialog_save"
      width="40%"
    >
      <el-tabs v-model="save_model" class="dialog">
        <!-- 保存到概览 -->
        <el-tab-pane label="添加到概览" name="1">
          <div class="save_config">
            <div class="line">
              <div class="left">概览类型</div>
              <div class="right">
                <el-radio
                  @change="overview.overviewIds=[]"
                  v-model="overviewGroupType"
                  label="1"
                >我的概览</el-radio>
                <el-radio
                  @change="overview.overviewIds=[]"
                  v-model="overviewGroupType"
                  label="0"
                >公共概览</el-radio>
              </div>
            </div>
            <div class="line">
              <div class="left">名称</div>
              <div class="right">
                <el-input v-model="overview.name" :size="size"></el-input>
              </div>
            </div>
            <div class="line">
              <div class="left">选择概览</div>
              <div class="right">
                <el-select
                  class="el_input"
                  v-model="overview.overviewIds"
                  :size="size"
                  multiple
                  filterable
                  allow-create
                  placeholder="请选择"
                >
                  <el-option
                    allow-create
                    v-for="item in _overviewList"
                    :key="item.id"
                    :label="item.overviewName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="line">
              <div class="left">图表类型</div>
              <div class="right">
                <span
                  @click="overview.chartType=0;overview.windowSize=null"
                  :class="overview.chartType===0?'type_ech active':'type_ech'"
                >
                  <span class="txt">
                    <i class="el-icon-picture-outline"></i>
                    <br>线图
                  </span>
                  <span v-show="overview.chartType===0" class="iconCheck"></span>
                  <i v-show="overview.chartType===0" class="el-icon-check"></i>
                </span>
                <span
                  @click="overview.chartType=1;overview.windowSize=null"
                  :class="overview.chartType===1?'type_ech active':'type_ech'"
                >
                  <span class="txt">
                    <i class="el-icon-s-data"></i>
                    <br>柱图
                  </span>
                  <span v-show="overview.chartType===1" class="iconCheck"></span>
                  <i v-show="overview.chartType===1" class="el-icon-check"></i>
                </span>
                <span
                  @click="overview.chartType=2;overview.windowSize=null"
                  :class="overview.chartType===2?'type_ech active':'type_ech'"
                >
                  <span class="txt">
                    <i class="el-icon-date"></i>
                    <br>表格
                  </span>
                  <span v-show="overview.chartType===2" class="iconCheck"></span>
                  <i v-show="overview.chartType===2" class="el-icon-check"></i>
                </span>
                <span
                  @click="overview.chartType=4;overview.windowSize=null"
                  :class="overview.chartType===4?'type_ech active':'type_ech'"
                >
                  <span class="txt">
                    <i class="el-icon-pie-chart"></i>
                    <br>环形图
                  </span>
                  <span v-show="overview.chartType===4" class="iconCheck"></span>
                  <i v-show="overview.chartType===4" class="el-icon-check"></i>
                </span>
                <span
                  @click="overview.chartType=3;overview.windowSize=null"
                  :class="overview.chartType===3?'type_ech active':'type_ech'"
                >
                  <span class="txt">
                    <i class="el-icon-document-checked"></i>
                    <br>数值
                  </span>
                  <span v-show="overview.chartType===3" class="iconCheck"></span>
                  <i v-show="overview.chartType===3" class="el-icon-check"></i>
                </span>
              </div>
            </div>
            <!-- <div class="line">
              <div class="left">同时显示</div>
              <div class="right">
                <el-checkbox-group :size="size" v-model="ts_show">
                  <el-checkbox label="均值"></el-checkbox>
                  <el-checkbox label="合计"></el-checkbox>
                  <el-checkbox label="同环比"></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>-->
            <div class="line lineSize">
              <div class="left">窗口尺寸</div>
              <div class="right">
                <span
                  v-if="overview.chartType==3"
                  @click="overview.windowSize=0"
                  :class="overview.windowSize==0?'type_ech type_ech_size active':'type_ech_size type_ech'"
                >
                  <span class="txt txtSize">
                    <span class="size">
                      <div class="box boxs">
                        <span class="s activeSize"></span>
                        <span class="s"></span>
                      </div>
                      <div class="box">
                        <span class="s"></span>
                        <span class="s"></span>
                      </div>
                    </span>
                    小
                  </span>
                  <span v-show="overview.windowSize===0" class="iconCheck"></span>
                  <i v-show="overview.windowSize===0" class="el-icon-check"></i>
                </span>

                <span
                  @click="overview.windowSize=1"
                  v-if="overview.chartType!=3&&overview.chartType!=4"
                  :class="overview.windowSize==1?'type_ech type_ech_size active':'type_ech_size type_ech'"
                >
                  <span class="txt txtSize">
                    <span class="size">
                      <div class="box boxm">
                        <span class="m activeSize"></span>
                        <span class="m"></span>
                      </div>
                    </span>
                    中
                  </span>
                  <span v-show="overview.windowSize===1" class="iconCheck"></span>
                  <i v-show="overview.windowSize===1" class="el-icon-check"></i>
                </span>
                <span
                  @click="overview.windowSize=2"
                  v-if="overview.chartType!=3"
                  :class="overview.windowSize==2?'type_ech type_ech_size active':'type_ech_size type_ech'"
                >
                  <span class="txt txtSize">
                    <span class="size">
                      <div class="box boxb">
                        <span class="b activeSize"></span>
                      </div>
                    </span>
                    大
                  </span>
                  <span v-show="overview.windowSize===2" class="iconCheck"></span>
                  <i v-show="overview.windowSize===2" class="el-icon-check"></i>
                </span>
              </div>
            </div>
            <div class="line">
              <div class="left">备注</div>
              <div class="right big">
                <el-input v-model="overview.remarks" type="textarea" :rows="4" :size="size"></el-input>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- <el-tab-pane label="保存到书签" name="2">
          <div class="save_config">
            <div class="line">
              <div class="left">配置项类型</div>
              <div class="right">
                <el-radio label="0">通用配置</el-radio>
                <el-radio label="1">私有配置</el-radio>
              </div>
            </div>
            <div class="line">
              <div class="left">配置项名称</div>
              <div class="right">
                <el-input :size="size"></el-input>
              </div>
            </div>
            <div class="line">
              <div class="left">备注</div>
              <div class="right big">
                <el-input type="textarea" :rows="3" :size="size"></el-input>
              </div>
            </div>
          </div>
        </el-tab-pane>-->
      </el-tabs>

      <span slot="footer" class="diglog_foot">
        <el-button :size="size" @click="dialog_save = false">取 消</el-button>
        <el-button :size="size" type="primary" v-if="save_model==1" @click="overviewSubmission">确 定</el-button>
        <el-button :size="size" type="primary" v-if="save_model==2">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import config from "./config.vue";
import tableSelf from "./tableSelf.vue"; // 表格组件
import echartSelf from "./echartSelf.vue"; // 绘图组件
import analysisApi from "@/utils/api/analysisApi.js"; // 引入接口文件
import { operationCtx } from "@/utils/auth.js";
export default {
  name: "eventAnalysis",
  components: { config, tableSelf, echartSelf },
  data() {
    return {
      readQuery: false, // 是否从路径上读取
      queryTotal: {
        appId: null,
        messures: [
          {
            aggregator: "general",
            aggregatorArr: ["general"], // 指标聚合操作绑定数组
            aggregatorList: [], // 指标聚合操作可选数组
            aggregatorName: "总次数",
            echartId: "_Anythinggeneral",
            eventId: "_Anything",
            eventName: "任意事件",
            field: { eventId: "_Anything", eventName: "任意事件" },
            fieldArr: null,
            filter: null,
            name: "任意事件的总次数",
            floadBool: true,
            nameBool: false
          }
        ], // 指标筛选数组
        byFields: [], // 分组筛选数组
        filter: null, // 全局筛选数组
        searchTime: {
          unit: "day", // 时间跨度
          startDate: null, // 开始时间
          endDate: null, // 结束时间
          contrastStartDate: null, // 对比开始时间
          contrastEndDate: null // 对比结束时间
        } // 时间参数
      }, // 查询用的整体入参
      queryDataArr: [], // 事件分析查询结果集
      config: {
        messures: [
          {
            aggregator: "general",
            aggregatorArr: ["general"], // 指标聚合操作绑定数组
            aggregatorList: [], // 指标聚合操作可选数组
            aggregatorName: "总次数",
            echartId: "_Anythinggeneral",
            eventId: "_Anything",
            eventName: "任意事件",
            field: { eventId: "_Anything", eventName: "任意事件" },
            fieldArr: null,
            filter: null,
            name: "任意事件的总次数",
            floadBool: true,
            nameBool: false
          }
        ], // 指标筛选数组
        byFields: [], // 分组筛选数组
        filter: null // 全局筛选数组
      }, // 配置面板入参
      // 概览弹框入参大对象
      overview: {
        type: 0,
        name: null, // 概览组件名称
        chartType: null, // 图标类型
        windowSize: null, // 窗口尺寸
        overviewIds: [], // 所属概览id
        remarks: null // 备注
      },
      // 概览所属list
      overviewList: [],
      overviewGroupType: "1", // 判断是私人概览还是通用概览
      save_model: "1",
      dialog_save: false,
      size: "small",
      operatorId: null,
      tool_bool: false // 抽样设置展示开关
    };
  },
  watch: {},
  methods: {
    // 配置面板更新
    queryTotalChange(obj) {
      let _obj = JSON.parse(JSON.stringify(this.queryTotal));
      _obj.byFields = JSON.parse(JSON.stringify(obj.byFields));
      _obj.filter = JSON.parse(JSON.stringify(obj.filter));
      _obj.messures = JSON.parse(JSON.stringify(obj.messures));
      _obj.appId = this.appItem.appId;

      // _obj = this.functionNullHandle(_obj);    // 对筛选条件中的  function  异常处理判断
      // console.log(_obj,'筛选条件')

      this.queryTotal = _obj;
      this.queryData();
    },
    // 为防止空指针异常，对筛选条件进行 function 为空判断
    // 时间更新函数
    updateTime(value) {
      this.queryTotal.searchTime = value;
      this.queryData();
    },
    // 数据查询函数   查询条件更新后，进行传入数据查询
    async queryData() {
      if (!this.queryTotal.messures || this.queryTotal.messures.length < 1) {
        this.$message({
          message: "至少选择一个指标",
          type: "warning"
        });
        return;
      }
      let obj = JSON.parse(JSON.stringify(this.queryTotal));
      if (obj.messures) {
        obj.messures.map(_i => {
          // _i.aggregatorList = [];
          _i.fieldArr = null;
          _i.aggregatorList = [];
        });
      }
      let res = await analysisApi.eventAnalysis.computeEventReport(obj);
      if (!res || !res.success) {
        this.queryDataArr = [];
        return;
      }
      this.queryDataArr = res.value;
    },
    zeroDel(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let day = date.getDate();
      mon = mon < 10 ? "0" + mon : mon;
      day = day < 10 ? "0" + day : day;
      return year + "-" + mon + "-" + day;
    },
    // 概览提交函数
    async overviewSubmission() {
      this.$refs.indexConfig.queryMessage();
      let obj = JSON.parse(JSON.stringify(this.overview)); // 概览弹框存储参数
      let _queryJson = JSON.parse(JSON.stringify(this.queryTotal));
      if(_queryJson.messures){
        _queryJson.messures.map(_i=>{
          _i.aggregatorList = [];
          _i.fieldArr = [];
        })
      }
      obj.queryJson = JSON.stringify(_queryJson); // 保存的查询条件
      obj.appId = this.appId
      let res = await analysisApi.eventAnalysis.overviewComponentAdd(obj);
      if (res && res.success) {
        this.dialog_save = false;
        this.$message({
          message: "保存成功",
          type: "success"
        });
      }
    },
    // 获取概览列表函数
    async getoOverviewList() {
      let res = await analysisApi.dataCard.overviewList({
        appId: this.appId,
        currentPage: 1,
        pageSize: 1000
      });
      if (res && res.success) {
        this.overviewList = res.value.list;
      }
    }
  },
  beforeCreate() {},
  created() {
    // 获取登录人
    this.operatorId = operationCtx.operatorDTO.operatorId;
    // 读取标签跳转过来的配置项
    let { labelId } = this.$route.query;
    let labelItem = JSON.parse(sessionStorage.getItem("labelItem"));
    if (labelId && labelItem && labelId == labelItem.id) {
      let _obj = JSON.parse(labelItem.queryJson);
      this.config = {
        messures: JSON.parse(JSON.stringify(_obj.messures)), // 指标筛选数组
        byFields: JSON.parse(JSON.stringify(_obj.byFields)), // 分组筛选数组
        filter: JSON.parse(JSON.stringify(_obj.filter)) // 全局筛选数组
      };
      this.queryTotal = JSON.parse(JSON.stringify(_obj));
    } else {
      this.queryTotal.appId = this.appItem.appId;
    }
    // 如果传入动态时间参数，根据动态时间配置项进行时间跨度更改
    if (
      this.queryTotal.searchTime &&
      this.queryTotal.searchTime.timeRestrict &&
      this.queryTotal.searchTime.timeRestrict.function == "dynamic_time"
    ) {
      let num_one = null;
      let num_Two = null;
      if (this.queryTotal.searchTime.timeRestrict.params[0].split("_").length == 3) {
        num_one = parseInt(
          Number(
            this.queryTotal.searchTime.timeRestrict.params[0].split("_")[1]
          )
        );
        num_one = new Date(
          new Date().getTime() - num_one * 24 * 60 * 60 * 1000
        );
        num_one =
          num_one.getFullYear() +
          "-" +
          (num_one.getMonth() + 1 < 10
            ? "0" + (num_one.getMonth() + 1)
            : num_one.getMonth() + 1) +
          "-" +
          (num_one.getDate() < 10
            ? "0" + num_one.getDate()
            : num_one.getDate());
      }else{
        num_one = this.queryTotal.searchTime.timeRestrict.params[0]
      }
      num_Two = parseInt(
        Number(this.queryTotal.searchTime.timeRestrict.params[1].split("_")[1])
      );
      num_Two = new Date(new Date().getTime() - num_Two * 24 * 60 * 60 * 1000);
      num_Two =
        num_Two.getFullYear() +
        "-" +
        (num_Two.getMonth() + 1 < 10
          ? "0" + (num_Two.getMonth() + 1)
          : num_Two.getMonth() + 1) +
        "-" +
        (num_Two.getDate() < 10 ? "0" + num_Two.getDate() : num_Two.getDate());

      if (num_one && num_Two) {
        this.queryTotal.searchTime.startDate = num_one;
        this.queryTotal.searchTime.endDate = num_Two;
      }
    }
    if (
      !this.queryTotal.searchTime.startDate ||
      !this.queryTotal.searchTime.endDate
    ) {
      this.queryTotal.searchTime.startDate = this.zeroDel(new Date().valueOf());
      this.queryTotal.searchTime.endDate = this.zeroDel(new Date().valueOf());
    } // 补充初始化开始时间时间
  },
  beforeMount() {
    this.getoOverviewList();
  },
  mounted() {
    this.queryData();
  },
  computed: {
    appId() {
      return this.$store.state.global.appId;
    },
    appItem() {
      return this.$store.state.global.appItem;
    },
    _overviewList() {
      let arr = JSON.parse(JSON.stringify(this.overviewList));
      let _arr = arr.filter(_i => {
        if (this.overviewGroupType == "0" && _i.overviewGroupType == "0") {
          return true;
        }
        if (
          this.overviewGroupType == "1" &&
          _i.overviewGroupType == "1" &&
          _i.creatorId == this.operatorId
        ) {
          return true;
        }
        return false;
      });
      return _arr;
    }
  }
};
</script>

<style scoped lang="scss">
.diglog_box {
  .dialog {
    position: relative;
    .save_config {
      width: 100%;
      .line {
        width: 99%;
        margin: 0rem auto 0.1rem;
        display: flex;
        justify-content: space-between;
        .left {
          width: 20%;
          height: 100%;
          text-indent: 0.12rem;
          height: 0.8rem;
          letter-spacing: 2px;
          // font-size: 14px;
          font-size: 0.22rem;
          display: flex;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          align-items: center;
        }
        .right {
          height: 100%;
          width: 80%;
          min-height: 1rem;
          display: flex;
          align-items: center;
          .type_ech {
            cursor: pointer;
            min-width: 1rem;
            // height: 0.8rem;
            min-height: 0.8rem;
            padding: 0 0 2px 0;
            display: inline-block;
            margin: 0 0.2rem 0 0;
            // font-size: 10px;
            font-size: 0.1rem;
            text-align: center;
            border-radius: 4px;
            border: 1px solid rgba($color: #8492a6, $alpha: 0.3);
            color: rgba($color: #8492a6, $alpha: 0.9);
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .txt {
              width: 100%;
              i {
                font-size: 0.26rem;
              }
              .size {
                display: inline-block;
                width: 90%;
                .box {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-evenly;
                  padding: 0.05rem 0;
                  .s,
                  .m,
                  .b {
                    border-radius: 2px;
                    border: 1px solid rgba($color: #8492a6, $alpha: 0.3);
                  }
                  .s {
                    width: 44%;
                    height: 0.2rem;
                  }
                  .m {
                    width: 44%;
                    height: 0.48rem;
                  }
                  .b {
                    width: 90%;
                    height: 0.5rem;
                  }
                }
                .boxs {
                  height: 0.3rem;
                }
                .boxm {
                  height: 0.5rem;
                }
                .boxb {
                  height: 0.5rem;
                }
                .activeSize {
                  background: rgba($color: #8492a6, $alpha: 0.2);
                  border: 1px solid rgba($color: #8492a6, $alpha: 0);
                }
              }
            }
            .iconCheck {
              position: absolute;
              top: 0;
              right: 0;
              width: 0;
              height: 0;
              border-bottom: 26px solid transparent;
              border-right: 26px solid rgba($color: #01b27a, $alpha: 0.8);
            }
            .el-icon-check {
              position: absolute;
              top: 2px;
              right: 2px;
              color: white;
            }
          }
          .type_ech:hover {
            border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
            color: rgba($color: #01b27a, $alpha: 0.8);
          }
          .active {
            border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
            color: rgba($color: #01b27a, $alpha: 0.8);
          }
          .type_ech_size {
            margin-top: 0.2rem;
            width: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            padding-top: 0.02rem;
          }
        }
        .big {
          height: 2rem;
        }
      }
      .lineSize {
        margin: 0.2rem auto;
      }
      .el_input {
        width: 100%;
      }
    }
  }
}
::v-deep .show_hidden {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: -0.2rem;
  z-index: 10;
}
.crumbs_arr_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tool_main {
    padding: 0 0.5rem 0 10px;
    font-size: 12px;
    font-weight: 500;
    color: #606266;
    // line-height: 44px;
    letter-spacing: 2px !important;
    .select {
      margin: 0 6px;
    }
    .fgf {
      display: inline-block;
      width: 1px;
      height: 16px;
      background: #c0c4cc;
      margin: 0 8px;
    }
    .tool_son {
      font-size: 16px;
      margin: 0 8px;
      font-size: 0.26rem;
    }
    .save {
      display: inline-block;
      font-size: 0.22rem;
      color: #007aff;
      height: 0.3rem;
      font-weight: 500;
      line-height: 0.3rem;
      margin-right: 0.1rem;
      i {
        font-size: 0.26rem;
      }
    }
    .tool_son:hover {
      color: #01b27a;
      font-weight: 600;
    }
  }
}
.block_tool {
  width: 98%;
  margin: 2px auto;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  .left {
    display: inline-block;
    width: 30%;
  }
  .right {
    display: inline-block;
    width: 70%;
  }
  .end {
    font-size: 14px;
    font-weight: 600;
    .btn_c {
      margin-right: 20px;
      font-weight: 400;
      font-size: 10px;
    }
    .btn_s {
      font-weight: 400;
      font-size: 10px;
      color: #f2f6fc;
      background: rgba($color: #01b27a, $alpha: 0.8);
      padding: 4px 10px;
      border-radius: 4px;
    }
    .btn_c:hover {
      color: #01b27a;
      font-weight: 500;
      font-size: 12px;
    }
  }
}
.eventAnalysis::-webkit-scrollbar {
  display: none;
}
.eventAnalysis {
  width: 98%;
  margin: 0 auto;
  box-sizing: border-box;
  height: 98.6%;
  overflow: scroll;
}
</style>
